<template>
   <div>
       <nav class="mui-bar mui-bar-tab" v-show="showTabBar">
           <router-link class="mui-tab-item" to="/home" :class="{'mui-active':$route.meta.active === '/home'}">
               <span class="mui-icon mui-icon-home"></span>
               <span class="mui-tab-label">首页</span>
           </router-link>
           <router-link class="mui-tab-item" to="/mine" :class="{'mui-active':$route.meta.active === '/mine'}">
               <span class="mui-icon mui-icon-contact"></span>
               <span class="mui-tab-label">我的</span>
           </router-link>
           <router-link class="mui-tab-item" to="/live" :class="{'mui-active':$route.meta.active === '/live'}">
               <span class="mui-icon mui-icon-videocam"></span>
               <span class="mui-tab-label">现场</span>
           </router-link>
       </nav>
   </div>
</template>

<script>
    export default {
        name: "TabBar",
        data() {
            return {
                showTabBar: true,
            };
        },
        created() {
            // 创建时播放栏不显示
            this.showTabBar =
                this.$route.path !== "/lyric" && this.$route.path !== "/setting" && this.$route.path !== "/sign-up" && this.$route.path !== "/info" && this.$route.path !== "/search" && this.$route.path !== "/singer-list" && this.$route.path !== "/song-list";
        },
        watch: {
            // 监听器，时刻保证不显示
            "$route.path"(newVal) {
                this.showTabBar = newVal !== "/lyric" && newVal !== "/setting" && newVal !== "/sign-up" && newVal !== "/info" && newVal !== "/search" && newVal !== "/singer-list" && this.$route.path !== "/song-list";
            },
        },
    }
</script>

<style lang="scss"  scoped>
    ul, li {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    // color
    $color-white: #ffffff;
    $color-white-dark: #f7f7f7;
    $color-grey: #8e98a2;
    $color-red: #e1594b;
    $color-blue: #26a2ff;
    $color-blue-dark: #48658f;
    $color-black: black;

    // distance
    $padding-out: 0 0.5em;
    .myHeader {
        z-index: 900;
        position: fixed;
        width: 100%;
        top: 0;
    }
    .mui-icon-bars{
        color: $color-white;
    }

</style>
